<template>
    <div class="left-handle">
        <div class="top">
            <template v-for='(pic, ind) in bgList'>
                <base-image 
                    :active='pic.active' 
                    :point='ind + 1' 
                    :key='ind'
                    :url='pic.url'
                    @click.native='onPicClick(ind, "bg")'
                ></base-image>
            </template>
            <base-add @add-method='onAddPic("bg")'></base-add>
        </div>
        <div class="main">
            <base-canvas :id='canvasId' size='calc(100vh - 190px)'></base-canvas>
        </div>
        <div class="bottom">
            <template v-for='(pic, ind) in bodyList'>
                <base-image 
                    :active='pic.active' 
                    :point='ind + 1' 
                    :key='ind'
                    :url='pic.url'
                    @click.native='onPicClick(ind, "body")'
                ></base-image>
            </template>
            <base-add @add-method='onAddPic("body")'></base-add>
        </div>
    </div>
</template>
<script>
import baseImage from '@/components/base/baseImage.vue'
import baseAdd from '@/components/base/baseAdd.vue'
import baseCanvas from '@/components/base/baseCanvas.vue'
export default {
    components: {
        baseImage,
        baseAdd,
        baseCanvas
    },

    data: () => ({
        canvasId: 'mainCanvas',
        bgSelect: [],
        bodySelect: [],
        bgList: [],
        bodyList: [
            // {url: require(`@/assets/image/${`logo.png`}`), active: true},
            // {url: require(`@/assets/image/${`logo.png`}`), active: false}
        ]
    }),
    created() {
        
    },

    methods: {
        onPicClick(ind, name) {
            let list = `${name}List`
            this[list].forEach(item => item.active = false)
            this[list][ind].active = true
            console.log(this[list], ind);
        },
        onAddPic(name) {
            this.showPicSelect = true
            this.selectList = this[`${name}Select`]
        }
    }
    
}
</script>
<style lang="scss" scoped>
.left-handle{
    display: flex;
    flex-direction: column;
    .main{
        box-sizing: border-box;
        flex: 1;
        border: 1px solid #ccc;
    }
    .top,.bottom{
        width: 100%;
        display: flex;
    }
}
</style>